<template>
  <div class="page-header">
    <el-menu
        background-color="#3c3f41"
        text-color="#fff"
        active-text-color="#fff"
        mode="horizontal"
        >
      <el-submenu index="user" style="float: right">
        <template class="avatar" slot="title">
          <span style="margin-right: 12px">欢迎您，{{account.username}}</span>
          <el-avatar :src="account.avatar" fit="fill"></el-avatar>
        </template>
        <el-menu-item v-if="account.roleId !== 9" @click="userDetail">个人中心</el-menu-item>
        <el-menu-item v-if="account.roleId !== 9" @click="changePasswordUrl">修改密码</el-menu-item>
        <el-menu-item @click="logout">退出</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import { get } from '@/plugins/axios'
import Vue from "vue";
import store from "@/store";

export default {
  name: "pageHeader",
  created() {
    this.decode()
  },
  data() {
    const module = '/user'
    return {
      uri: {
        decode: module + '/decode'
      },
      account: {
        id: '',
        username: '',
        avatar: '',
        roleId: ''
      }
    }
  },
  methods: {
    decode() {
      const params = {
        token: this.$store.getters.GET_TOKEN
      }
      get(this.uri.decode, params, response => {
        if (response.code === 200) {
          this.account.id = response.data.id
          this.account.username = response.data.username
          this.account.avatar = this.imgUrl + response.data.avatarPath
          this.account.roleId = response.data.roleId
          // vuex存储account信息
          this.$store.commit('SET_ACCOUNT', this.account)
        }
      })
    },
    userDetail() {
      this.$router.push({path: '/user/detail'})
    },
    changePasswordUrl() {
      this.$router.push({path: '/changePassword'})
    },
    logout() {
      this.$store.commit('SET_TOKEN', null)
      store.commit('SET_ROUTES', null)
      Vue.reloadMenu = true
      this.$router.push({path: '/login'})
    }
  }
}
</script>

<style scoped lang="less">
.page-header {
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
    .el-col {
      border-radius: 4px;
      .grid-content {
        border-radius: 4px;
        min-height: 61px;
        line-height: 61px;
      }
      .bg-purple {
        //background: #d3dce6;
      }
      //.avatar {
      //  float: right;
      //  margin-right: 30px;
      //  margin-top: 5px;
      //}
    }
  }
}
</style>